<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <%@ include file="../common/header.jsp" %>
    <script src="/js/My97DatePicker/WdatePicker.js"></script>
</head>
<body>

<div class="container " style="margin-top: 20px">
    <%@ include file="../common/top.jsp" %>

    <div class="row">
        <div class="col-sm-3">
            <c:set var="menu" value="customerPool"/>
            <%@ include file="../common/menu.jsp" %>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">客户池</h1>
                </div>
            </div>
            <form class="form-inline" id="searchForm" action="/customerPool/list.do" method="post">
                <input type="hidden" name="currentPage" id="currentPage" value="1">
                <input type="hidden" name="status" id="status" value="1">
                <div class="form-group">
                    <label>关键字:</label>
                    <input type="text" class="form-control" name="keyword"
                           value="" placeholder="请输入姓名/邮箱">
                     <!-- <div class = "form-group">
                     	<label for="dept">状态</label>
                     	   <select class="form-control" name = "status"> 
		                    	<option value = "-1">全部</option>
		                    	<option value = "0">潜在用户</option>
		                    	<option value = "2">开发失败</option>
		                    	<option value = "3">流失</option>
		                    </select>
		                    
		                    <script>
		                    	$("#searchForm select[name='status']").val(${qo.status});
		                    </script>
                      </div>
                       -->
                 
                </div>
                
                <button type="submit" class="btn btn-primary">
                    <span class="glyphicon glyphicon-search"></span> 查询
                </button>
<!--                 <a href="/customer/input.do" class="btn btn-success">
                    <span class="glyphicon glyphicon-plus"></span> 添加
                </a>        -->         
                <!-- <a role="button" class="btn btn-success inputBtn">
                    <span class="glyphicon glyphicon-plus"></span> 添加
                </a> -->
            </form>

            <table class="table table-striped table-hover">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>电话</th>
                    <th>QQ</th>
                    <th>职业</th>
                    <th>来源</th>
                    <th>营销人员</th>
                    <!-- <th>状态</th> -->
                    <th>操作</th>
                </tr>
                <c:forEach var="entity" items="${pageInfo.list}" >
				 <tr>
					 <td>${entity.id}</td>
					 <td>${entity.name}</td>
					 <td>${entity.age}</td>
					 <td>${entity.genderName}</td>
					 <td>${entity.tel}</td>
					 <td>${entity.qq}</td>
                     <td>${entity.job.title}</td>
                     <td>${entity.source.title}</td>
					 <td>${entity.seller.name}</td>
					 <%-- <td>${entity.statusName}</td> --%>
					 <td>
<%-- 						 <a href="/customer/input.do?id=${entity.id}" class="btn btn-info btn-xs">
							 <span class="glyphicon glyphicon-pencil"></span> 编辑
						 </a> --%>
						    <a role="button" class="btn btn-warning btn-xs transferMeBtn" data-json='${entity.json}'>
                                <span class="glyphicon glyphicon-leaf"></span> 移交给我
                            </a>
                            <a role="button" class="btn btn-warning btn-xs transferBtn" data-json='${entity.json}'>
                                <span class="glyphicon glyphicon-leaf"></span> 移交
                            </a>
                            						 
					 </td>
				 </tr>
				</c:forEach>
				 
            </table>

            <%@ include file="../common/page.jsp" %>
        </div>
    </div>
</div>

<!-- 编辑客户模态框 -->
<div class="modal fade" id="customerModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">编辑</h4>
            </div>
            <div class="modal-body">
                <!--填充编辑界面-->
                <form class="form-horizontal" action="/customer/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" name="id"/>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">姓名：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="name" placeholder="请输入客户姓名"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">年龄：</label>
                        <div class="col-lg-6">
                            <input type="number" class="form-control" name="age" placeholder="请输入客户年龄"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">性别：</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="gender">
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">电话：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="tel" placeholder="请输入客户电话"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">QQ：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control"name="qq" placeholder="请输入客户QQ"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">职业：</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="job.id">
                    
                                <c:forEach var = "j" items="${jobs}">
                                	<option value="${j.id}">${j.title}</option>
                                </c:forEach>

                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">来源：</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="source.id">
   
                                <c:forEach var = "s" items="${sources}">
                                    <option value="${s.id}">${s.title}</option>
                                 </c:forEach>
                                
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary customerSubmitBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="statusModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">修改客户状态</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/customer/updateStatus.do" method="post" id="statusForm">
                    <input type="hidden" name="id" />
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">客户姓名：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" id="name" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">客户状态：</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="status">
                                <option value="0">潜在客户</option>
                                <option value="1">移入客户池</option>
                                <option value="2">开发失败</option>
                                <option value="3">流失</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary statusSubmitBtn">保存</button>
            </div>
        </div>
    </div>
</div>


<script>
$(function () {
    //跟进时间的框弹出日历
    $("#traceForm input[name='traceTime']").click(function () {
        WdatePicker({
            readOnly: true,
            maxDate: new Date()
        });
    });

    //找到所有的inputBtn类绑定点击事件
    $(".inputBtn").click(function () {
        //1:先清空模态框数据
        $("#editForm input").val("");
        //2:尝试拿到当前按钮上的JSON数据
        //拿到到data-json
        var json = $(this).data("json"); //去当前对象上的自定义属性的数据
        //3:只有编辑按钮才要回显数据
        if (json) {
            //把数据回显到模态框中
            $("#editForm input[name='id']").val(json.id);
            $("#editForm input[name='name']").val(json.name);
            $("#editForm input[name='age']").val(json.age);
            $("#editForm input[name='tel']").val(json.tel);
            $("#editForm input[name='qq']").val(json.qq);
            $("#editForm select[name='gender']").val(json.gender);
            $("#editForm select[name='job.id']").val(json.jobId);
            $("#editForm select[name='source.id']").val(json.sourceId);
        }
        //4:弹出模态框
        $("#customerModal").modal("show");
    });
    
    //跟进历史的按钮
    $(".traceBtn").click(function () {
        //回显数据到模态框中
        var json = $(this).data("json");
        $("#traceForm input[name='customer.id']").val(json.id);
        $("#customerName").val(json.name);
        $("#traceModal").modal("show");
    });

    //移交按钮点击事件
    $(".transferBtn").click(function () {
        var json = $(this).data("json");
        showModal(json);
    });
    
    //修改客户状态按钮点击事件
    $(".changeStatusBtn").click(function () {
        var json = $(this).data("json");
        //1:回显客户信息
        $("#name").val(json.name);
        $("#statusForm input[name='id']").val(json.id);
        //2:显示模态框
        $("#statusModal").modal("show");
    });

    //提交表单
    $(".transferSubmitBtn").click(function () {
        $("#transferForm").ajaxSubmit(function (data) {
            //操作成功后跳转到移交历史界面
            doSuccess("/customerTransfer/list.do");
        });
    });

    //异步提交表单
    $("#editForm,#statusForm").ajaxForm(function (data) {
        doSuccess();
    });
    $("#traceForm").ajaxForm(function (data) {
        doSuccess("/customerTraceHistory/list.do");
    });

    //给表单按钮绑定点击事件,提交表单
    $(".customerSubmitBtn").click(function () {
        $("#editForm").submit();
    });

    $(".traceSubmitBtn").click(function () {
        $("#traceForm").submit();
    });

    $(".statusSubmitBtn").click(function () {
        $("#statusForm").submit();
    });
});


/* function showModal(json) {
    //发送请求,查询当前可移交的新销售员
    $.get("/employee/queryNewSellers.do", {id: json.sellerId}, function (data) {
        //清空原来的新销售员
        $("#transferForm select[name='newSeller.id']").html("");
        //重新填充
        $.each(data, function (index, ele) {
            $("<option value='"+ele.id+"'>"+ele.name+"</option>")
                    .appendTo("#transferForm select[name='newSeller.id']");
        });
        //必须放在响应函数中,先完成了异步加载,才能回显
        //回显新销售为当前登录的用户
        //使用Shiro标签来回显
        $("#transferForm select[name='newSeller.id']").val(<@shiro.principal property="id" />);
    }, "json");

    //回填其他数据
    $("#transferForm input[name='customer.id']").val(json.id);
    $("#transferForm input[name='oldSeller.id']").val(json.sellerId);
    $("#oldSeller").val(json.sellerName);
    $("#cname").val(json.name);
    $("#transferModal").modal("show");
} */
</script>

</body>
</html>